<template>
    <div class="custom-theme">
        <div class="code-box" v-for="(item, index) in data" :key="index">
            <t class="t1" :id="item.id || item.title || ''" v-html="item.title || ''"></t>
            <h3 v-html="item.subTitle || ''"></h3>
            <template v-if="item.des">
                <li v-for="d in item.des" :key="d" v-html="d"></li>
            </template>
            <example v-if="item.insetDom" :template-code="item.code">
                <div class="home-index">
                    <!-- 颜色切换控件 -->
                    <el-color-picker v-model="theme" @change="changeThemeColor"></el-color-picker>
                    <div class="title">
                        假设这是个项目主页
                    </div>
                    <div class="content">
                        页面内容
                    </div>
                </div>
            </example>
            <pre-code v-else-if="item.code" :code="item.code"></pre-code>
        </div>
        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
import { ref, inject, onMounted } from 'vue';
import { useStore } from 'vuex';

export default {
    name: 'CustomTheme',
    setup() {
        const defaultThemeColor = window.localStorage.getItem('current_theme_color') || '#00c4a3';
        const changeThemeColor = inject('$changeThemeColor');
        const resetThemeColor = inject('$resetThemeColor');
        const getThemeClusters = inject('$getThemeClusters');
        const theme = ref(defaultThemeColor);

        const store = useStore();
        onMounted(() => { store.commit('updateArticleTree'); });

        return {
            theme,
            data: [
                {
                    title: '在初始化<span class="s-code">sibionics-ui-next</span>时，传入主题颜色',
                    id: '初始化时，传入主题色',
                    subTitle: '<span class="s-code">app.use</span>时支持传入配置项<span class="d-code">theme</span>，用于配置全局主题色',
                    des: [],
                    code: // eslint-disable-next-line vue/script-indent
`import { createApp } from 'vue';
// 引入 element-plus
import ElementPlus from 'element-plus';
// 引入 element-plus 图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 引入 element-plus 样式
import 'element-plus/dist/index.css';
// 引入 sibionics-ui-next
import sibionics from 'sibionics-ui-next';
// 引入 sibionics-ui-next 样式文件
import 'sibionics-ui-next/lib/index.css';

import axios from 'axios';
import router from './router';
import App from './App';

const app = createApp(App);

// 将 $axios 注册为全局提供者
// 以保证组件内部的自动请求接口获取数据的相关功能正常运行
app.provide('$axios', axios);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// theme 仅支持传入类似 #666666、rgb(100, 100, 100)、rgb(100, 100, 100, 0.5) 格式的值
// 注意: rgb(100, 100, 100, .5) 缩略写法可能无法解析
app.use(ElementPlus).use(sibionics, { theme: '#00C4A3' }).use(router).mount('#app');
`,
                },
                {
                    title: '切换主题色',
                    subTitle: '<span class="s-code">Vue</span>原型上挂载了相关切换主题色的方法',
                    des: [
                        '<span class="d-code">$changeThemeColor</span>可用于切换主题色；参数为字符串<span class="s-code">color</span>',
                        '<span class="d-code">$resetThemeColor</span>可用于还原初始主题颜色',
                        '<span class="d-code">$getThemeClusters</span>可根据颜色获取该颜色按梯度渐变的颜色列表；参数为字符串<span class="s-code">color</span>',
                    ],
                },
                {
                    title: '其他页面使用主题色',
                    subTitle: '建议使用 <span class="d-code">var(--el-primary-color)</span> 函数来获取主题色值',
                    des: [
                        '<span class="d-code">var(--el-primary-color)</span>  &nbsp; 主题色',
                        ...Array(9).fill().map((_, i) => `<span class="d-code">var(--el-primary-color-light-${i + 1})</span>  &nbsp; 主题色${9 - i}0%`),
                    ],
                    insetDom: true,
                    code: // eslint-disable-next-line vue/script-indent
`<!-- 使用示例 -->
<template>
    <div class="home-index">
        <!-- 颜色切换控件 -->
        <input type="color" v-model="theme" @change="changeThemeColor" />
        <div class="title">假设这是个项目主页</div>
        <div class="content">页面内容</div>
    </div>
</template>

<script>
import { ref, inject } from 'vue';

export default {
    setup() {
        const defaultThemeColor = window.localStorage.getItem('current_theme_color') || '#00c4a3';
        const changeThemeColor = inject('$changeThemeColor');
        const resetThemeColor = inject('$resetThemeColor');
        const getThemeClusters = inject('$getThemeClusters');
        const theme = ref(defaultThemeColor);

        return {
            theme,
            changeThemeColor: (color) => {
                if (color) {
                    // 切换主题色
                    changeThemeColor(color);
                    // 如果有需要，可以通过getThemeClusters来获取该颜色按梯度渐变的颜色列表
                    const themeClusters = getThemeClusters(color);
                    console.log(themeClusters);
                } else {
                    // 还原初始主题颜色
                    resetThemeColor();
                    theme.value = defaultThemeColor;
                }
            },
        };
    },
};
<\/script>
<style>
.home-index {
    position: relative;
    width: 500px;
    height: 300px;
}
.home-index input {
    position: absolute;
    right: 0;
    top: 0;
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    border: 1px solid var(--el-primary-color);
    border-radius: 3px;
}
.home-index .title {
    font-size: 20px;
    font-weight: 600;
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    color: var(--el-primary-color);
    /* 此处可以使用 var(--el-primary-color-light-6) 来代表主题色40%*/
    background: var(--el-primary-color-light-6);
    line-height: 100px;
    text-align: center;
}
.home-index .content {
    width: 100%;
    height: calc(100% - 100px);
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    background: var(--el-primary-color);
    line-height: 200px;
    font-size: 30px;
    text-align: center;
    color: #fff;
}
</style>
`,
                },
            ],
            changeThemeColor: (color) => {
                if (color) {
                    // 切换主题色
                    changeThemeColor(color);
                    // 如果有需要，可以通过getThemeClusters来获取该颜色按梯度渐变的颜色列表
                    const themeClusters = getThemeClusters(color);
                    console.log(themeClusters);
                } else {
                    // 还原初始主题颜色
                    resetThemeColor();
                    theme.value = defaultThemeColor;
                }
            },
        };
    },
};
</script>

<style>
.custom-theme {
    padding-bottom: 50px;
}
.custom-theme .code-box {
    padding: 15px 0;
}
.custom-theme pre {
    display: flex;
}

.home-index {
    position: relative;
    width: 500px;
    max-width: 100%;
    height: 300px;
    margin: 20px 0;
}
.home-index .el-color-picker {
    position: absolute;
    right: 0;
    top: 0;
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    border: 1px solid var(--el-primary-color);
    border-radius: 3px;
}
.home-index .title {
    font-size: 20px;
    font-weight: 600;
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    color: var(--el-primary-color);
    /* 此处可以使用 var(--el-primary-color-light-6) 来代表主题色40%*/
    background: var(--el-primary-color-light-6);
    line-height: 100px;
    text-align: center;
}
.home-index .content {
    width: 100%;
    height: calc(100% - 100px);
    /* 此处可以使用 var(--el-primary-color) 来代表主题色*/
    background: var(--el-primary-color);
    line-height: 200px;
    font-size: 30px;
    text-align: center;
    color: #fff;
}
</style>
